<template>
    <div class="container">
      <div class="login">
        <span class="title">管理系统</span>
        <el-form :model="data.form" ref="formRef" :rules="data.rules">
          <el-form-item prop="username">
            <el-input :prefix-icon="User" placeholder="用户名" v-model="data.form.username" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input :prefix-icon="Lock" placeholder="密码" v-model="data.form.password" show-password/>
          </el-form-item>
          <el-form-item prop="role">  
            <el-select v-model="data.form.role">
              <el-option value="ADMIN" label="管理员"/>
              <el-option value="EMP" label="员工"/>
            </el-select>
          </el-form-item>
          <el-button size="large" type="primary" class="login-btn" @click="login">登录</el-button>
        </el-form>
        <div class="zhuce">还没有账号？<a href="/register">点我注册</a></div>
      </div>
    </div>
</template>

<script setup>
import {reactive,ref} from "vue"
import {User,Lock} from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage } from "element-plus";

const formRef = ref(null);
const data = reactive({ 
  form:{ role :"ADMIN"},
  rules:{
    username:[{required:true , message:"请输入用户名" , trigger:'blur'}],
    password:[{required:true , message:"请输入密码" , trigger:'blur'}]
  }
})

const login = () =>{
    formRef.value.validate((valid)=>{
        if(valid){
          console.log(data.form,"from");
          request.post('/login',data.form).then(res=>{
            if(res.code == '200'){
              //存取登录信息
              localStorage.setItem('user',JSON.stringify(res.data))
              ElMessage.success("登陆成功")
              location.href="/manager/home"
            }else{
              ElMessage.error(res.msg)
            }
          })
        }
    })
}


</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
  background-image: url('@/assets/background.PNG');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  background: #fff;
  width: 400px;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
  display: block;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  width: 100%;
}

.login-btn {
  width: 100%;
  margin-top: 20px;
  font-size: 16px;
}

.zhuce {
  margin-top: 20px;
  font-size: 14px;
  color: #606266;
}

.zhuce a {
  color: #409eff;
  text-decoration: none;
}

.zhuce a:hover {
  text-decoration: underline;
}
</style>